<template>
  <el-date-picker
    ref="datePicker"
    v-bind="$attrs"
    v-on="$listeners"
    v-model="date"
    type="daterange"
    value-format="yyyy-MM-dd"
    range-separator="-"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
    :editable="editable"
    :append-to-body="appendToBody"
    :picker-options="limit ? pickerOptions : null"
    :align="align"
    :unlink-panels="true"
    @change="change"
    class="DateRange"
  >
  </el-date-picker>
</template>
<script>
const shortcutsList = [
  {
    text: "近一天",
    onClick(picker) {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24);
      picker.$emit("pick", [start, end]);
    },
  },
  {
    text: "近三天",
    onClick(picker) {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
      picker.$emit("pick", [start, end]);
    },
  },
  {
    text: "近一周",
    onClick(picker) {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      picker.$emit("pick", [start, end]);
    },
  },
  {
    text: "近一个月",
    onClick(picker) {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
      picker.$emit("pick", [start, end]);
    },
  },
  {
    text: "近三个月",
    onClick(picker) {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
      picker.$emit("pick", [start, end]);
    },
  },
  {
    text: "近半年",
    onClick(picker) {
      const end = new Date();
      const start = new Date();
      start.setMonth(start.getMonth() - 6);
      picker.$emit("pick", [start, end]);
    },
  },
  {
    text: "近一年",
    onClick(picker) {
      const end = new Date();
      const start = new Date();
      start.setFullYear(start.getFullYear() - 1);
      picker.$emit("pick", [start, end]);
    },
  },
  {
    text: "近三年",
    onClick(picker) {
      const end = new Date();
      const start = new Date();
      start.setFullYear(start.getFullYear() - 3);
      picker.$emit("pick", [start, end]);
    },
  },
];

export default {
  name: "DateRange",
  inheritAttrs: false,
  props: {
    value: {
      type: Array,
      require: true,
      default: () => [],
    },
    limit: {
      type: Boolean,
      default: true,
    },
    // 自定义快捷方式,严格匹配shortcutsList中的text的值
    // ['近一天', '近三天','近一周','近一个月','近三个月','近半年','近一年','近三年']
    shortcuts: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      align: "center",
      date: [],
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts:
          this.shortcuts.length == 0
            ? false
            : shortcutsList.filter((item) =>
                this.shortcuts.includes(item.text)
              ),
      },
    };
  },
  watch: {
    value: {
      handler() {
        this.date = this.value;
      },
      immediate: true,
      deep: true,
    },
  },
  computed: {
    appendToBody() {
      return this.$attrs["append-to-body"] ? true : false;
    },
    editable() {
      return this.$attrs["editable"] ? true : false;
    },
  },
  methods: {
    change(time) {
      this.$emit("update:value", time || ["", ""]);
    },
  },
};
</script>
<style lang="scss" scoped>
.DateRange {
  width: 280px;
}
</style>
